A typical Graphical User Interface (GUI) includes a number of GUI components (e.g., icons, labels, push buttons, radio buttons, checkboxes, combination boxes or combo boxes, pop-up menus, pop-down menus, menu bars, tool bars, text entries, text areas, canvas panels, sliders, and others) contained within a window. A user may want to reduce the size of the window to make room for other windows, or enlarge the window to have a large area for displaying detailed information in the window. When the window containing these GUI components is resized, the layout of the GUI components within the window is typically changed in order to accommodate the new size of the window.
FIGS. 2-4 show a prior art method of rearranging buttons when the window containing the buttons is resized. In FIG. 2, window 200 contains buttons 211-216 and canvas panels 203 and 205 for displaying information. Canvas panel 203 contains information that cannot be entirely fit into panel 203. Thus, a scroll control 201 is provided for a user to view different portions of the information displayed in canvas panel 203.
A user may drag an edge of the window to resize it. For example, a user may drag near point 201, where the cursor changes its shape to indicate dragging is causing the window to change its width. When the size of the window is reduced, the buttons are rearranged. In FIG. 3, the width of the window is reduced when compared to that in FIG. 2. Since the sizes of the buttons 211-216 are fixed, only buttons 211-214 can be displayed above canvas panels 203 and 205. Thus, buttons 215-216 are hidden. Icon 305 is displayed to indicate that some of the buttons are hidden, which can be accessed by selecting it (positioning a cursor over icon 305 and pressing a button such as a mouse's button). The widths of canvas panels 205 and 203 are resized so that canvas panels 205 and 203 can be displayed within the window. When the width of canvas 303 is not large enough to display the information in it, a scroll bar 303 is provided for navigation purposes.
The user may further adjust the width by dragging near point 301. When the window is reduced to a width as shown in FIG. 4, only buttons 211-213 are visible above canvas 203. Canvas 205 is hidden, since there is not enough space for it. Canvas 205 is displayed only when the window has a large enough space for it. When the user presses icon 405 with cursor 403 (e.g., pressing a button of a mouse when the cursor 403 is located above icon 405), a menu 401 is shown in a separate window, displaying buttons 411, 413, and 415. Buttons 411-415, corresponding to buttons 214-216, are normally hidden when the window is resized to a width as shown in FIG. 4. When icon 405 is pressed, buttons 411-415 are displayed so that the user may press one of them.
Thus, when a window containing a number of GUI components is resized, the layout of GUI components within the window is typically changed to accommodate the size of the window.